<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>vue与控制脚本的交互 | RobotJs | 用JS任意控制手机上的APP</title>
  <link rel="stylesheet" href="assets/fonts.css">
  <link rel="stylesheet" href="assets/style.css">
  <link rel="stylesheet" href="assets/sh.css">
  <link rel="canonical" href="https://nodejs.org/api/autojs-vue.html">
</head>
<body class="alt apidoc" id="api-section-autojs-vue">
  <div id="content" class="clearfix">
    <div id="column2" class="interior">
      <div id="intro" class="interior">
        <a href="/" title="返回首页">
          RobotJs
        </a>
      </div>
      <ul>
<li><a class="nav-startnow" href="startnow.html">开始</a></li>
<li><a class="nav-hbuilder" href="hbuilder.html">Demo, 调试运行</a></li>
<li><a class="nav-hello" href="hello.html">Hello World</a></li>
<li><a class="nav-autojs-vue active" href="autojs-vue.html">与vue交互</a></li>
<li><a class="nav-normal" href="normal.html">常用api</a></li>
<li><a class="nav-links" href="links.html">支持库(超强)</a></li>
<li><a class="nav-patchs" href="patchs.html">热更新</a></li>
<li><a class="nav-deploy" href="deploy.html">打包</a></li>
<li><a class="nav-remote" href="remote.html">远程部署</a></li>
<li><a class="nav-java" href="java.html">与java交互</a></li>
<li><a class="nav-qa" href="qa.html">Q&amp;A - 常见问题</a></li>
<li><a class="nav-https-miren-lovemi-ren-colorui-document-" href="https://miren.lovemi.ren/colorui-document/" target="_blank" rel="noopener noreferrer">UI设计</a><div class="line"></div></li>
<li><a class="nav--" href="#">【API文档】:</a></li>
<li><a class="nav-overview" href="overview.html">Overview - 综述</a></li>
<li><a class="nav-documentation" href="documentation.html">Tip - 阅读说明</a></li>
<li><a class="nav-coordinatesBasedAutomation" href="coordinatesBasedAutomation.html">Click - 基于坐标的操作</a></li>
<li><a class="nav-widgetsBasedAutomation" href="widgetsBasedAutomation.html">开始 - 基于控件的操作</a></li>
<li><a class="nav-widgetsBasedAutomation-widgetsbasedautomation_simpleactionautomator" href="widgetsBasedAutomation.html#widgetsbasedautomation_simpleactionautomator">Click - 基于控件的操作</a></li>
<li><a class="nav-widgetsBasedAutomation-widgetsbasedautomation_uiselector" href="widgetsBasedAutomation.html#widgetsbasedautomation_uiselector">UiSelector - 查找控件</a></li>
<li><a class="nav-widgetsBasedAutomation-widgetsbasedautomation_uiobject" href="widgetsBasedAutomation.html#widgetsbasedautomation_uiobject">UiObject - 控件</a></li>
<li><a class="nav-app" href="app.html">App - 应用</a></li>
<li><a class="nav-canvas" href="canvas.html">Canvas - 画布</a></li>
<li><a class="nav-console" href="console.html">Console - 控制台</a></li>
<li><a class="nav-crypto" href="crypto.html">Crypto - 加解密与消息摘要</a></li>
<li><a class="nav-device" href="device.html">Device - 设备</a></li>
<li><a class="nav-dialogs" href="dialogs.html">Dialogs - 对话框</a></li>
<li><a class="nav-engines" href="engines.html">Engines - 脚本引擎</a></li>
<li><a class="nav-events" href="events.html">Events - 事件与监听</a></li>
<li><a class="nav-floaty" href="floaty.html">Floaty - 悬浮窗</a></li>
<li><a class="nav-files" href="files.html">Files - 文件系统</a></li>
<li><a class="nav-globals" href="globals.html">Globals - 一般全局函数</a></li>
<li><a class="nav-http" href="http.html">Http - HTTP</a></li>
<li><a class="nav-images" href="images.html">Images - 图片与图色处理</a></li>
<li><a class="nav-keys" href="keys.html">Keys - 按键模拟</a></li>
<li><a class="nav-media" href="media.html">Media - 多媒体</a></li>
<li><a class="nav-modules" href="modules.html">Modules - 模块</a></li>
<li><a class="nav-sensors" href="sensors.html">Sensors - 传感器</a></li>
<li><a class="nav-shell" href="shell.html">Shell - Shell命令</a></li>
<li><a class="nav-storages" href="storages.html">Storages - 本地存储</a></li>
<li><a class="nav-threads" href="threads.html">Threads - 多线程</a></li>
<li><a class="nav-timers" href="timers.html">Timers - 定时器</a></li>
<li><a class="nav-ui" href="ui.html">UI - 用户界面</a></li>
<li><a class="nav-https-developer-mozilla-org-zh-CN-docs-Mozilla-Projects-Rhino-Scripting_Java" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino/Scripting_Java">Work with Java - 调用Java API</a></li>
</ul>
<div class="line"></div>



    </div>

    <div id="column1" data-id="autojs-vue" class="interior">
      <header>
        <h1>用JS任意控制手机上的APP</h1>
        <div id="gtoc">
          <p>
            <a href="index.html" name="toc">索引</a> |
            <a href="all.html">查看全部</a>
          </p>
        </div>
        <hr>
      </header>

      <div id="toc">
        <h2>目录</h2>
        <ul>
<li><span class="stability_undefined"><a href="#autojs_vue_vue">vue与控制脚本的交互</a></span><ul>
<li><span class="stability_undefined"><a href="#autojs_vue">参数解释</a></span><ul>
<li><span class="stability_undefined"><a href="#autojs_vue_1">执行控制脚本文件</a></span><ul>
<li><span class="stability_undefined"><a href="#autojs_vue_2">立即执行(当前实例中)</a></span></li>
<li><span class="stability_undefined"><a href="#autojs_vue_3">立即执行(新脚本)</a></span></li>
<li><span class="stability_undefined"><a href="#autojs_vue_robotjs_vue">robotjs脚本获取VUE发过来的参数(启动脚本时传递的)</a></span></li>
<li><span class="stability_undefined"><a href="#autojs_vue_robotjs_vue_1">robotjs脚本给VUE层发消息</a></span></li>
<li><span class="stability_undefined"><a href="#autojs_vue_robotjs_vue_2">robotjs脚本直接访问VUE页面对象</a></span></li>
<li><span class="stability_undefined"><a href="#autojs_vue_index_vue">例index.vue</a></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

      </div>

      <div id="apicontent">
        <h1>vue与控制脚本的交互<span><a class="mark" href="#autojs_vue_vue" id="autojs_vue_vue">#</a></span></h1>
<h2>参数解释<span><a class="mark" href="#autojs_vue" id="autojs_vue">#</a></span></h2>
<p>在VUE页面，立即执行控制脚本代码(不建议)</p>
<pre><code>//vue代码
var {autojs} = require(&#39;robot-tools&#39;);

//【不建议】立即执行控制脚本（无需js文件或执行robotjs脚本，可立即执行本代码）
autojs.exec(function(){ //【不建议】
    //脚本代码:
    console.log(&#39;开始振动 &#39;);
    console.show();
    device.vibrate(2000);
    launchApp(&#39;抖音&#39;); 
});
//偶尔用一下，不要太依赖
//todo:
//1. 作用域在控制脚本内，此处暂不支持对VUE的访问，下一版补上；(如果需要访问VUE，看下面的start方法)
//2. 如果需要用require方法引用其他的js文件，请先用autojs.robot.setJsDir(&quot;/sdcard/&quot;)设置工作路径；
//   或者用autojs.init({file:&#39;demo.js&#39;})设置个假的文件，工作路径参考下文
</code></pre><h3>执行控制脚本文件<span><a class="mark" href="#autojs_vue_1" id="autojs_vue_1">#</a></span></h3>
<pre><code class="lang-js">//vue代码
var {autojs} = require(&#39;robot-tools&#39;);
var param = { 
    file: &#39;demo.js&#39;, //[必选],脚本(static/robots/demo.js)，或绝对路径/sdcard/xxx.js，或远程URL(也可以用发布的打包加密代码)
    vue:  this, //可选, 将本vue对象传递给脚本
    arguments: {}, //可选, json,传递给脚本的参数。[提示]如果不传递，则系统会默认使用&#39;当时&#39;的vue的data数据；
    onMessage: (data)=&gt;{}, //可选,回调函数，脚本给VUE发送消息， 感觉快淘汰了
    start: ()=&gt;{}, //可选,脚本启动事件
    finish: (obj)=&gt;{},//可选,脚本执行完毕事件
    fail: (msg)=&gt;{},//可选,脚本发生意外事件
}
/*

file:  
//1. 脚本(static/robots/目录下的demo.js)，
//2. 或绝对路径/sdcard/xxx.js，
//3. 或远程URL(也可以用发布的打包加密代码)

arguments: 
//可选, json,传递给脚本的参数。
//可以在控制脚本中用app.args获取
//如果不传递参数，则系统会默认传递&#39;当时&#39;的vue的$data数据；
//如果控制脚本想动态获取vue的$data的数据，请往下看
*/

//启动脚本
autojs.start(param); 

//停止脚本
autojs.stop();

//仅设置初始化参数，不执行代码
autojs.init(param); 
//根据上面设置好的参数，执行代码； 也可以在悬浮脚本上点启动按钮
autojs.start(); 

autojs.menu.show(); //显示悬浮脚本图标 
autojs.menu.move(x,y); //移动悬浮脚本图标
autojs.menu.close(); //隐藏悬浮脚本图标
autojs.showMenu(param); //执行脚本并显示脚本图标
autojs.closeMenu(); //隐藏图标


var isEnabled = autojs.permission();//检查是否启动了无障碍

</code></pre>
<h4>立即执行(当前实例中)<span><a class="mark" href="#autojs_vue_2" id="autojs_vue_2">#</a></span></h4>
<pre><code class="lang-js">//在当前已经运行的脚本中，立即执行小段脚本(需要在robotjs脚本启动后，再调用该方法)
autojs.eval(function(){ 
    //在vue的代码文件里，直接执行脚本代码，
   launchApp(&#39;抖音&#39;);
   sleep(4000);
   console.log(text(&#39;我&#39;)); 
});
</code></pre>
<h4>立即执行(新脚本)<span><a class="mark" href="#autojs_vue_3" id="autojs_vue_3">#</a></span></h4>
<pre><code class="lang-js">//立即执行控制脚本（代码可以是字符串）
autojs.exec(function(){
   console.log(device.getIMEI());
   launchApp(&#39;抖音&#39;); 
 }
);
</code></pre>
<pre><code class="lang-js">autojs.exec(
 `
   console.log(device.getIMEI());
   launchApp(&#39;抖音&#39;); 
 `
);
</code></pre>
<h4>robotjs脚本获取VUE发过来的参数(启动脚本时传递的)<span><a class="mark" href="#autojs_vue_robotjs_vue" id="autojs_vue_robotjs_vue">#</a></span></h4>
<pre><code>//[autojs代码]
app.args //json对象, 
app.arguments  //参数字符串

//内置参数
app.args.scriptStartFrom //null 或 &#39;menu&#39;； 可以通过不同的启动方式，执行不同的代码
app.args._debug //调试模式，还是正式模式
</code></pre><h4>robotjs脚本给VUE层发消息<span><a class="mark" href="#autojs_vue_robotjs_vue_1" id="autojs_vue_robotjs_vue_1">#</a></span></h4>
<pre><code>//[autojs代码]
app.post2host(&quot;hello vue&quot;); 
//robotjs脚本用这个方法给VUE层发消息,(在上面的onMessage中接收消息)
</code></pre><h4>robotjs脚本直接访问VUE页面对象<span><a class="mark" href="#autojs_vue_robotjs_vue_2" id="autojs_vue_robotjs_vue_2">#</a></span></h4>
<pre><code>//[autojs代码]
app.vue  //控制脚本直接访问vue的对象，上面传递进来的对象this(或别的对象)
app.vue.abc   //访问data里的abc变量
app.vue.abc = 999; //给data里面的abc赋值
app.vue.test() //访问VUE的methods里面的test函数。 此用法可以淘汰上面的onMessage回调

</code></pre><h4>例index.vue<span><a class="mark" href="#autojs_vue_index_vue" id="autojs_vue_index_vue">#</a></span></h4>
<pre><code class="lang-html">&lt;template&gt;
&lt;view&gt; 
    {{abc}}
&lt;/view&gt;
&lt;/template&gt;
&lt;script&gt; 
var {autojs} = require(&#39;robot-tools&#39;);
export default {
    data: {
        abc: 123
    }
    methods: {
        test() {
            console.log(&#39;autojs called test.&#39;);
        }
    }
}
&lt;/script&gt;
</code></pre>

      </div>
    </div>
  </div>
  <script src="assets/sh_main.js"></script>
  <script src="assets/sh_javascript.min.js"></script>
  <script>highlight(undefined, undefined, 'pre');</script>
  <!-- __TRACKING__ -->
</body>
</html>